<#assign ctx = request.contextPath />
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0 ,maximum-scale=1.0" user-scalable=no >
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>vip申请</title>
    <link href="${ctx}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/assets/css/weixing.css" rel="stylesheet" />
    <link href="${ctx}/assets/css/sco.message.css" rel="stylesheet" />
  </head>
  <body>
  	<#--<img style="width: 100%; height: 100%;" src="${ctx}/assets/img/0-bj.jpg" alt="易米">-->
	  	<div class="login-box">
	  		<form id="submit_form"  method="post">
	  			
	  			<div class="form-group">
	  				<div class="form-vip">
						<p><a style="color:#FF0000;">*</a><b style="color:#FFFFFF;margin:0px 0px 0px 0px;">类型</b></p>
						<p class="form-control-static" style="font-size:20px">VIP用户</p>
					</div>
				</div>
	  		
	  			<div class="form-group">
					<div class="form-vip">
			  		<p><a style="color:#FF0000;">*</a><b style="color:#FFFFFF; margin:0px 0px 0px 0px;" placeholder="" >姓名</b></p>
					<input id="name" name="name" class="form-control floating-label" type="text" placeholder="" value="${membername?if_exists}">
					</div>
				</div>
				
				<div class="form-group" >
					<div class="form-vip">
			  		<p><a style="color:#FF0000;">*</a><b style="color:#FFFFFF;">手机</b></p>
					<input id="phone" name="phone" class="form-control floating-label" type="text" placeholder=""  value="${phone?if_exists}" readonly="readonly">
					</div>
				</div>
				
				<div class="form-group"  class="form-vip" style="margin-bottom: 0px;">
					<div class="form-vip">
			  		<p><a style="color:#FF0000;">*</a><b style="color:#FFFFFF;">邮箱</b></p>
					<input id="email" name="email" class="form-control floating-label" type="text" placeholder="" >
					</div>
				</div>
				 <#--
				 <div class="row" style="text-align: center; color: #FFFFFF;">
				 	<div class="col-xs-4"style="padding-top: 8px;"><b>申请类型</b></div>
				 	<div class="col-xs-4">
				 		<div class="checkbox">
						    <label>
						      <input type="checkbox"> 个人
						    </label>
						 </div>
				 	</div>
				 	<div class="col-xs-4">
				 		<div class="checkbox">
						    <label>
						      <input type="checkbox"> 企业
						    </label>
						 </div>
				 	</div>
				 </div>
				 -->
				<div class="form-group"  class="form-vip" style="margin-top: 0px;">
					<div class="form-vip">
			  		<p><b style="color:#FFFFFF;">备注:</b></p>
					<input id="remarks"  name="remarks" class="form-control floating-label" type="text"  style="height: 60px;">
					</div>
				</div>
				 
			  <button type="button" class="btn btn-default btn-block" id="submit_button" style="margin: 30px 0px 20px 0px;">提交申请</button>
			  
			</form>  
		</div>		  
  </body>
</html>
<script src="${ctx}/assets/js/jquery-1.11.0.min.js"></script>
<script src="${ctx}/assets/js/bootstrap.min.js"></script>
<script src="${ctx}/assets/js/sco.message.js"></script>
<script type="text/javascript">
	
		<#if message??>
		$.scojs_message("${message}", $.scojs_message.TYPE_ERROR);
		</#if>
		//表单验证
		$(document).ready(function(){
			
			var backlayer ="<div id='loadblacklayer'><div style='text-align: center;margin-left: auto;margin-right: auto;width: 140px; border-radius:4px;height: 140px; background-color:#000; color: #FFF;'><img src='${ctx}/assets/img/q.gif'  width='100px'/><p>请稍等...</p></div></div>";
			$("body").append(backlayer);
			var height =  $("body").height()/2 - 70;
			$('#loadblacklayer').find("div").css({"margin-top":height});
			$('#loadblacklayer').css({"z-index":"9","background":"#fff","opacity":"0.5","position":'absolute',"top":0,"width":"100%","height":"100%"});
			$(window).resize(function(){
				var height =  $("body").height()/2 - 70;
				$('#loadblacklayer').find("div").css({"margin-top":height});
			});
			$('#loadblacklayer').hide();
			
			$("#submit_button").bind('click',function(){
				var realname=$("#name").val();
				if($.trim($("#name").val())==''){
					$.scojs_message("姓名不能为空", $.scojs_message.TYPE_ERROR);
		    		return false;
		    	}
				
				if($.trim($("#phone").val())==''){
		    		$.scojs_message("电话号码不能为空", $.scojs_message.TYPE_ERROR);
		    		return false;
		    	}
		    	
		    	var isphone=/^\+?\d{3,13}(\-?(\d{6,8}?))?(\-?(\d{4,8}?))*$/; 
				if (!isphone.test($("#phone").val())){
					$.scojs_message("电话号码格式不正确", $.scojs_message.TYPE_ERROR);
					return false;
				}
				
				
				if($.trim($("#email").val())==''){
		    		$.scojs_message("邮箱不能为空", $.scojs_message.TYPE_ERROR);
		    		return false;
		    	}
				
				var isemail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
				if(!isemail.test($("#email").val())){
					$.scojs_message("邮箱格式不正确", $.scojs_message.TYPE_ERROR);
					return false;
				}
				
				$('#loadblacklayer').show();
				$.post('${ctx}/wx/v1/createVip',$('#submit_form').serialize(),function(data){
	            if(data.success){
	            	$('#loadblacklayer').hide();
	                window.location.href='${ctx}/wx/v1/waiting';
	            }else if(data.errorcode=="alread"){
	            	$('#loadblacklayer').hide();
	            	 window.location.href='${ctx}/wx/v1/waiting';
	            }else{
	            	$("#submit_button").attr("disabled",false);
	            	$('#loadblacklayer').hide();
	            	$.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
	            }
		    },'json');
			
			});
		});

	</script>
